<template>
  <!-- 圆点提示 -->
  <el-badge
    v-if="shell=='badge'"
    :is-dot="badgeOption?false:true"
    :value="badgeOption?badgeOption:null"
  >
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
      @click="submitClick"
    ></el-image>
  </el-badge>

  <!-- 弹出菜单 -->
  <el-popover
    v-else-if="shell=='popup'"
    v-model="showMenu"
    trigger="click"
  >
    <div @click="popClick">
      <slot name="popup"></slot>
    </div>
    <el-image
      slot="reference"
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
    ></el-image>
  </el-popover>

  <!-- 预览 -->
  <div v-else-if="shell=='preview'">
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
      @click="showMenu=true"
    ></el-image>
    <image-viewer
      v-if="showMenu"
      :z-index="9999"
      :initial-index="previewIndex"
      :url-list="previewOption"
      :on-close="previewCloseClick"
    />
  </div>

  <!-- 上传 -->
  <div
    v-else-if="shell=='upload'"
    class="upload-bar"
  >
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
    ></el-image>
    <input
      class="upload-input"
      ref="upload"
      type="file"
      :accept="uploadAccept"
      :multiple="uploadMaxcount>1"
      @dragover.prevent="onDragover"
      @dragleave.prevent="dragover=false"
      @drop.prevent="onDrop"
      @change="uploadClick"
    />
  </div>

  <!-- 选择位置 -->
  <div v-else-if="shell=='mapchoose'">
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
      @click="showMenu=true"
    >
      <i
        slot="error"
        class="el-icon-picture-outline any-image any-image-error"
        :style="imageStyle"
      ></i>
    </el-image>
    <el-dialog
      title="选择位置"
      top="24px"
      :width="mapWidth"
      :visible.sync="showMenu"
      append-to-body
      @open="openMapchoose"
      @close="closeMapchoose"
    >
      <iframe
        id="mapId"
        width="100%"
        :height="mapHeight"
        frameborder="0"
        @load="mapLoad"
        :src="mapUrl"
      ></iframe>
    </el-dialog>
  </div>

  <!-- 显示位置 -->
  <div v-else-if="shell=='maplocation'">
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
      @click="showMenu=true"
    >
      <i
        slot="error"
        class="el-icon-picture-outline any-image any-image-error"
        :style="imageStyle"
      ></i>
    </el-image>
    <el-dialog
      title="显示位置"
      top="24px"
      :width="mapWidth"
      :visible.sync="showMenu"
      append-to-body
    >
      <iframe
        width="100%"
        :height="mapHeight"
        frameborder="0"
        :src="mapUrl"
      ></iframe>
    </el-dialog>
  </div>

  <!-- hover提示 -->
  <el-tooltip
    v-else-if="shell=='tooltip'"
    effect="dark"
    :content="tooltipOption"
  >
    <el-image
      :class="imageClass"
      :style="imageStyle"
      :src="src"
      :fit="type"
      :lazy="lazy"
      @click="submitClick"
    ></el-image>
  </el-tooltip>

  <!-- 单个图片 -->
  <el-image
    v-else
    :class="imageClass"
    :style="imageStyle"
    :src="src"
    :fit="type"
    :lazy="lazy"
    @click="submitClick"
  >
    <i
      slot="error"
      class="el-icon-picture-outline any-image any-image-error"
      :style="imageStyle"
    ></i>
  </el-image>
</template>

<script>
import anyfishUI from "../../index";
import imageViewer from "../../mm-image-viewer/src/mm-image-viewer.vue";
export default {
  components: {
    "image-viewer": imageViewer
  },

  name:"mm-image",
  props: {
    imageStyle: {// 图片样式
      type: String,
      default: null
    },

    src: {// 图片url
      type: String,
      default: ""
    },

    type: {// 图片类型：fill、contain、cover、none、scale-down
      type: String,
      default: "fill"
    },

    round: {// 是否是圆角
      type: Boolean,
      default: false
    },

    circle: {// 是否是圆形
      type: Boolean,
      default: false
    },

    lazy: {// 图片是否懒加载
      type: Boolean,
      default: false
    },

    shell: {// 外壳类型：badge、popup、preview、upload、mapchoose、maplocation、tooltip
      type: String,
      default: null
    },

    badgeOption: {// 对应badge的圆点提示文字，不为空则显示文字，为空则显示圆点
      type: String,
      default: null
    },

    previewIndex: {// 对应preview的图片url数组的index
      type: Number,
      default: 0
    },

    previewOption: {// 对应preview的图片url数组
      type: Array,
      default: null
    },

    uploadDrag: {// 对应upload，是否开启拖拽
      type: Boolean,
      default: false
    },

    uploadType: {// 对应upload，文件可选的类型：jpg|jpeg|png|gif|zip|excel
      type: String,
      default: null
    },

    uploadAccept: {// 对应upload，文件选择的范围：image/*、video/*、audio/*
      type: String,
      default: null
    },

    uploadMaxcount: {// 对应upload，文件可选的的最大个数
      type: Number,
      default: 1
    },

    uploadMaxsize: {// 对应upload，选中单个文件的最大大小
      type: Number,
      default: 0
    },

    mapWidth: {// 对应mapchoose、maplocation的宽度
      type: String,
      default: "60%"
    },

    mapHeight: {// 对应mapchoose、maplocation的高度
      type: String,
      default: "400px"
    },

    mapLongitude: {// 对应mapchoose、maplocation的经度
      type: [Number, String],
      default: null
    },

    mapLatitude: {// 对应mapchoose、maplocation的纬度
      type: [Number, String],
      default: null
    },

    maplocationName: {// 对应maplocation的位置名称
      type: String,
      default: null
    },

    tooltipOption: {// 对应tooltip的提示文字
      type: String,
      default: null
    }
  },

  data() {
    return {
      showMenu: false,
      dragover: false
    }
  },

  computed: {
    imageClass() {
      let info = "any-image";
      if (this.circle) {
        info += " circle-image";
      } else if (this.round) {
        info += " round-image";
      }
      if (this.dragover) {
        info += " upload-drag";
      }
      return info;
    },

    mapUrl() {
      if (this.shell == "mapchoose") {
        let url = "https://m.amap.com/picker/?key=" + anyfishUI.api.getMapKey();
        if (this.mapLongitude && this.mapLatitude) {
          url += "&center=" + this.mapLongitude + "," + this.mapLatitude;
        }
        return url;
      }
      if (this.shell == "maplocation") {
        let url = "https://m.amap.com/navi/?hideRouteIcon=1&key=" + anyfishUI.api.getMapKey();
        if (this.mapLongitude && this.mapLatitude) {
          url += "&dest=" + this.mapLongitude + "," + this.mapLatitude;
        }
        if (this.maplocationName) {
          url += "&destName=" + this.maplocationName;
        }
        return url;
      }
      return null;
    }
  },

  methods: {
    submitClick() {
      this.$emit("click");
    },

    popClick() {
      this.$emit("click", this.popCloseClick);
    },

    popCloseClick() {
      this.showMenu = false;
    },

    previewCloseClick() {
      this.showMenu = false;
    },

    onDragover() {
      if (this.uploadDrag) {
        this.dragover = true;
      }
    },

    onDrop(e) {
      this.dragover = false;
      if (this.uploadDrag) {
        if (e.dataTransfer && this.checkFiles(e.dataTransfer.files)) {
          if (e.dataTransfer.files.length == 1) {
            this.$emit("click", e.dataTransfer.files[0]);
          } else {
            this.$emit("click", e.dataTransfer.files);
          }
        } else {
          this.$emit("click");
        }
      }
    },

    uploadClick(e) {
      if (e.target && this.checkFiles(e.target.files)) {
        if (e.target.files.length == 1) {
          this.$emit("click", e.target.files[0]);
        } else {
          this.$emit("click", e.target.files);
        }
      } else {
        this.$emit("click");
      }
      this.$refs.upload.value = "";
    },

    checkFiles(files) {
      if (!files || files.length < 1) {
        return false;
      }
      if (this.uploadMaxcount > 0 && files.length > this.uploadMaxcount) {
        anyfishUI.api.toast("选择的文件不能超过" + this.uploadMaxcount + "个");
        return false;
      }
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let typeError = this.checkFileType(file.type);
        if (typeError) {
          anyfishUI.api.toast(typeError);
          return false;
        }
        if (this.uploadMaxsize > 0 && file.size > this.uploadMaxsize) {
          let size = this.uploadMaxsize > 1048576 ? this.uploadMaxsize / 1048576 + "M" : this.uploadMaxsize / 1024 + "KB";
          anyfishUI.api.toast("选择的文件大小不能超过" + size);
          return false;
        }
      }
      return true;
    },

    checkFileType(type) {
      if (!this.uploadType) {
        return null;
      }
      if (!type) {
        return "选择的文件类型未知";
      }
      let typeArray = this.uploadType.split("|");
      let error = null;
      for (let i = 0; i < typeArray.length; i++) {
        let item = typeArray[i].trim();
        if (type.indexOf(item) > -1) {
          return null;
        }
        if (!error) {
          error = item;
        } else {
          error += "、" + item;
        }
      }
      return "请选择" + error + "类型的文件";
    },

    mapListener(event) {
      if (event && event.data && event.data.name && event.data.address && event.data.location) {
        this.showMenu = false;
        let param = {
          name: event.data.name,
          address: event.data.address
        };
        let array = event.data.location.split(",");
        if (array.length == 2) {
          param.longitude = array[0];
          param.latitude = array[1];
        }
        this.$emit("click", param);
      }
    },

    mapLoad(e) {
      document.getElementById("mapId").contentWindow.postMessage("hello", "https://m.amap.com/picker/");
    },

    openMapchoose() {
      window.addEventListener("message", this.mapListener, false);
    },

    closeMapchoose() {
      window.removeEventListener("message", this.mapListener, false);
    }
  }
}
</script>

<style scoped>
.any-image {
  height: 100px;
  width: 100px;
}

.round-image {
  border-radius: 12px;
}

.circle-image {
  border-radius: 50%;
}

.any-image-error {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #f5f7fa !important;
}

.preview-bar {
  background: red;
}

.upload-bar {
  position: relative;
}

.upload-input {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.upload-drag {
  border: dashed 2px #409eff;
}
</style>